<template>
  <uni-search-bar @confirm="handleSearch" v-model="searchText" @cancel="refresh" @clear="refresh" />
  <view class="container" v-if="!showSearch">
    <view class="main-title">我的收藏</view>
    <view class="star">
      <view class="item" v-for="item in starList" :key="item.starID" @click="handleJumpTo(item)">
        <view style="font-size: 30rpx" class="t-icon" :class="'t-' + item.icon"></view>
        {{ item.moduleName }}
      </view>
      <view class="item" v-if="!starList" @click="jumpToAdd">
        <view class="t-icon t-icon-tianjia"></view>
        添加
      </view>
      <view class="item" v-if="starList" @click="jumpToAdd">
        <view class="t-icon t-icon-gengduo"></view>
        管理
      </view>
    </view>
    <view class="main-title">更多应用</view>
    <view class="module" v-for="item in categoryList" :key="item.categoryID">
      <view class="title">{{ item.category }}</view>
      <view>
        <view class="items" v-if="list.filter((i) => i.category === item.category).length !== 0">
          <view
            class="item"
            v-for="item in list.filter((i) => i.category === item.category)"
            :key="item.categoryID"
            @click="handleJumpTo(item)"
          >
            <view style="font-size: 30rpx" class="t-icon" :class="'t-' + item.icon"></view>
            {{ item.moduleName }}
          </view>
        </view>
        <view class="no-data" v-else> 暂无内容 </view>
      </view>
    </view>
  </view>
  <!-- 搜索结果 -->
  <view v-else class="search">
    <view class="title">共搜到{{ searchCount }}条与“{{ confirmSearchText }}”相关的内容</view>
    <view>
      <view class="items" v-if="searchResult && searchResult.length !== 0">
        <view class="item" v-for="item in searchResult" @click="handleJumpTo(item)" :key="item">
          <view style="font-size: 30rpx" class="t-icon" :class="'t-' + item.icon"></view>
          {{ item.moduleName }}
        </view>
      </view>
      <view class="no-data" v-else> 暂无内容 </view>
    </view>
  </view>
  <Loading />
</template>

<script setup>
  import { GetModuleCategory, GetModuleList, GetStarModule, SearchModule } from '@/apis/module.js'
  import { onPullDownRefresh, onShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import Loading from '@/components/Loading.vue'

  const list = ref([])
  const categoryList = ref([])
  const starList = ref([])

  const showSearch = ref(false)
  const searchText = ref('')
  const confirmSearchText = ref('')
  const searchResult = ref(null)
  const searchCount = ref(0)

  function jumpToAdd() {
    uni.navigateTo({
      url: '/pages/moduleList/manage/manage'
    })
  }

  function handleSearch() {
    showSearch.value = true
    SearchModule({
      keyword: searchText.value
    }).then((res) => {
      confirmSearchText.value = searchText.value
      searchCount.value = res.count
      searchResult.value = res.data
    })
  }

  function handleJumpTo(e) {
    if (e.moduleURL.startsWith('http')) {
      uni.navigateTo({
        url: `/pages/webview/webview?url=${e.moduleURL}`
      })
    } else if (e.moduleURL.startsWith('wx')) {
      plus.share.getServices(
        (res) => {
          let sweixin = null
          for (let i = 0; i < res.length; i++) {
            let t = res[i]
            if (t.id == 'weixin') {
              sweixin = t
            }
          }
          if (sweixin) {
            uni.showToast({
              position: 'bottom',
              title: '正在唤起微信小程序'
            })
            sweixin.launchMiniProgram({
              id: e.moduleURL,
              type: 0
            })
          }
        },
        (err) => {
          uni.showToast({
            icon: 'error',
            title: err
          })
        }
      )
    } else {
      uni.navigateTo({
        url: e.moduleURL
      })
    }
  }

  function refresh() {
    searchText.value = confirmSearchText.value = ''
    searchResult.value = null
    showSearch.value = false
    GetModuleList().then((res) => {
      list.value = res.data
    })
    GetModuleCategory().then((res) => {
      categoryList.value = res.data
    })
    GetStarModule().then((res) => {
      starList.value = res.data
    })
  }

  onPullDownRefresh(async () => {
    await refresh()
    await uni.stopPullDownRefresh()
  })

  onShow(() => {
    refresh()
  })
</script>

<style lang="scss" scoped>
  .container {
    padding: 20rpx;

    .main-title {
      text-align: center;
      font-weight: bold;
      padding: 20rpx 0;
      color: #333;

      &:last-child {
        padding-bottom: 0;
      }
    }

    .star {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-content: space-between;
      align-items: center;
      gap: 20rpx;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 24rpx;
        padding: 10rpx;
        gap: 10rpx;

        &:active {
          filter: contrast(0.8);
          background-color: #ececec;
        }
      }
    }

    .module {
      margin-bottom: 20rpx;

      .title {
        padding: 20rpx;
        font-size: 30rpx;
        font-family: SmileySans;
        // font-weight: bold;
        color: #333;
      }
    }
  }

  .items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    align-items: center;
    gap: 20rpx;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 24rpx;
      padding: 10rpx;
      gap: 10rpx;

      &:active {
        filter: contrast(0.8);
        background-color: #ececec;
      }
    }
  }

  .no-data {
    text-align: center;
    color: #333;
    font-size: 24rpx;
    margin-top: 20rpx;
  }

  .search {
    padding: 0 20rpx;
  }
</style>
